<html>
<head>
<title>Effects example</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="../src/main/js/loader.js"></script>
<script type="text/javascript">

	var Window = load('core.ui.Window');
    var Tween = load('core.effect.Tween');
    var LinearMotion = load('core.effect.LinearMotion');
    var Blink = load('core.effect.Blink');
    var FadeOut = load('core.effect.FadeOut');
    var FadeIn = load('core.effect.FadeIn');
    var EffectSequence = load('core.effect.EffectSequence');
	var None = load('core.effect.easing.None');
    var Back = load('core.effect.easing.Back');
    var Bounce = load('core.effect.easing.Bounce');
    var Regular = load('core.effect.easing.Regular');
    var Strong = load('core.effect.easing.Strong');
	var Timer = load('core.util.Timer');

	var easing = new None();
	var easingType = Tween.EASE_NONE;
	
	function init() {
		wnd = new Window();
		wnd.center();
		wnd.show();
	}

	function blink() {
		new Blink(wnd, 420, new Timer(70)).play();
	}

	function fadeOut() {
		new core.effect.FadeOut(wnd, 900, new Timer(30), easing, easingType).play();
	}
	
	function fadeIn() {
		new core.effect.FadeIn(wnd, 900, new Timer(30), easing, easingType).play();
	}

	function motion() {
		wnd.move(0, wnd.getY());
		var endpointX = Window.getWidth() - wnd.getWidth();
		var endpointY = wnd.getY();
		new LinearMotion(wnd, 900, new Timer(30), endpointX, endpointY,
			easing, easingType).play();
	}

	function compound() {
		wnd.move(0, wnd.getY());
		var endpointX = Window.getWidth() - wnd.getWidth();
		var endpointY = wnd.getY();
		var effect = new EffectSequence();
		effect.add(new Blink(wnd, 420, new Timer(70)));
		effect.add(new LinearMotion(wnd, 900, new Timer(30), endpointX, endpointY, easing, easingType));
		effect.add(new FadeOut(wnd, 900, new Timer(30), easing, easingType));
		effect.add(new FadeIn(wnd, 900, new Timer(30), easing, easingType));
		effect.play();
	}

	function onUpdateEasing(easingClass) {
		var clazz = DefaultClassLoader.getClassByName(easingClass);
		easing = new clazz();
	}

	function onUpdateEasingType(type) {
		easingType = type;
	}

</script>
<style>

	* {
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.Window {
		width: 200px;
		height: 200px;
		background-color: #ff0000;
	}

</style>
</head>

<body onload="javascript:init()">

	<a href="javascript:blink()">Blink</a> | 
	<a href="javascript:fadeOut()">Fade out</a> | 
	<a href="javascript:fadeIn()">Fade in</a> | 
	<a href="javascript:motion()">Linear motion</a> | 
	<a href="javascript:compound()">Compound effect</a>

	<br /><br />

	Easing:

	<select onchange="onUpdateEasing(this.value)">
		<option value="core.effect.easing.None" selected="selected">None</option>
		<option value="core.effect.easing.Back">Back</option>
		<option value="core.effect.easing.Bounce">Bounce</option>
		<option value="core.effect.easing.Regular">Regular</option>
		<option value="core.effect.easing.Strong">Strong</option>
	</select>

	<select onchange="onUpdateEasingType(this.value)">
		<option value="easeNone" selected="selected">None</option>
		<option value="easeIn">Ease In</option>
		<option value="easeOut">Ease Out</option>
		<option value="easeInOut">Ease In/Out</option>
	</select>

</body>
</html>
